<script setup>
// let obj = {
//   a: 1,
//   b: 2,
//   c: 3
// }
// console.log(obj.a, obj.b, obj.c)

// let {a, b, c} = obj
//
// console.log(a, b, c)
//
// let arr1 = [11, 22, 33]
// let [a1, b1, c1] = arr1
// console.log(a1, b1, c1)


import {reactive, toRef, toRefs} from "vue"
// 数据
let person = reactive(
    {
      name: '张三',
      age: 18,
      gender: '男'
    }
)


// let {name, age, gender} = person
// console.log(name, age, gender)

// 单个数据的响应式转换
// let name = toRef(person, 'name')
// let age = toRef(person, 'age')
// let gender = toRef(person, 'gender')
// console.log(name)

// 批量数据的响应式转换
let {name, age, gender} = toRefs(person)
// console.log(name, age, gender)
// 修改数据
// 修改姓名的方法
function changeName() {
  name.value = '王五'
}

function changeAge() {
  age.value++
}

function changeGender() {
  gender.value = '女'
}

</script>

<template>
  <div class="person">
    <!--    <h2>姓名：{{ person.name }}</h2>-->
    <!--    <h2>年龄：{{ person.age }}</h2>-->
    <!--    <h2>性别：{{ person.gender }}</h2>-->

    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>性别：{{ gender }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>

</template>
